// 富文本编辑器
initEditor()


// 获取分类----------------------------------------------------
axios.get('/my/category/list').then(function (res) {
  let { status, data } = res.data
  if (status === 0) {
    let str = ''
    data.forEach(item => {

      str += ` <option value="${item.id}">${item.name}</option>`
    });
    $('select[name="cate_id"]').append(str)
    // 加载完后要渲染
    let form = layui.form
    form.render('select')
  }
})

// 裁剪区域-----------------------------------------------------------
// 封面处理
// 初始化剪裁框
let $image = $('#image')
// 裁剪选项
let option = {
  // 宽高比
  aspectRatio: 400 / 280,
  // 预览区
  preview: '.img-preview'
}

// 初始化裁剪区域
$image.cropper(option)

// 选择封面---------------------------------------------------
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click')
  $('#file').on('change', function (e) {
    let file = e.currentTarget.files[0]
    let url = URL.createObjectURL(file)
    // 更换图片
    $image.cropper('replace', url)
  })
})

// 收集数据-------------------------------------------------------------
$('form').on('submit', function (e) {
  e.preventDefault()
  let fd = new FormData(this)
  // 设置content值
  fd.set('content', tinyMCE.activeEditor.getContent());
  // 对于图片来说, 需要剪裁, 剪裁之后, 转成文件对象格式, 追加到fd中'
  let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: 280 })
  // 把canvas转成文件对象格式
  canvas.toBlob(function (blob) {
    fd.append('cover_img', blob)
    // ajax提交
    axios.post('/my/article/add', fd).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message)
        $('form')[0].reset()
      }
    });
  })
})

